<div class="app-login-container">
  <div class="app-login-inner-container">
    <div class="app-login-box-card">
      <div class="app-login-flex">
        <div class="app-login-img"></div>
        <div class="app-login-form-box">
          <h3 class="app-login-title">Hippo后台管理系统</h3>

          <form nz-form [formGroup]="loginForm" class="app-login-form" (ngSubmit)="login()">
            <nz-form-item>
              <nz-form-control nzErrorTip="用户名格式不正确！">
                <nz-input-group [nzPrefix]="prefixUser">
                  <ng-template #prefixUser><i nz-icon nzType="user"></i></ng-template>
                  <input type="text" nz-input formControlName="userName" placeholder="请输入用户名...">
                </nz-input-group>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-control nzErrorTip="密码格式不正确！">
                <nz-input-group [nzPrefix]="prefixLock">
                  <ng-template #prefixLock><i nz-icon nzType="lock"></i></ng-template>
                  <input type="password" nz-input formControlName="password" placeholder="请输入密码...">
                </nz-input-group>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-control>
                <button nz-button nzBlock [nzType]="'primary'">登录</button>
              </nz-form-control>
            </nz-form-item>
          </form>

        </div>
      </div>
      <div class="app-login-copyright">
        <div class="app-text-center">Copyright 2019 cjh. All Rights Reserved.</div>
      </div>
    </div>
    <div class="app-login-desc">系统仅支持Edge、Google Chrome、Mozilla Firefox、Safari以及其它主流的浏览器，如您的浏览器无法使用本系统，请更换其它浏览器！</div>
  </div>
</div>